<!-- 用户登录后跳转的页面 首页 -->
<template>
    <div class="home">
        <!-- 左侧菜单 -->
        <!-- 动态添加类fold 根据仓库中的fold 判断菜单是否折叠 为true：折叠 false:展开 -->
        <div class="home-slider">
            <!-- 系统logo和名称 -->
            <Logo></Logo>
            <!-- 菜单 -->
            <el-scrollbar class="scrollbar">
                <!-- active-text-color="#119A83" -->
                <el-menu background-color="#402525" text-color="white" :default-active="$route.path"
                    :collapse="settingStore.fold ? true : false">
                    <Menu :menuList="userStore.menuRoutes"></Menu>
                </el-menu>
            </el-scrollbar>
        </div>
        <!-- 顶部导航 -->
        <div class="home-tabbar" :class="{ fold: settingStore.fold ? true : false }">
            <Tabbar></Tabbar>
        </div>
        <!-- 内容展示区域 -->
        <div class="home-main" :class="{ fold: settingStore.fold ? true : false }">
            <Main></Main>
        </div>
    </div>
</template>

<script setup lang="ts">
import Logo from './logo/index.vue'
import Menu from './menu/index.vue'
import Tabbar from './tabbar/index.vue'
import Main from './main/index.vue'
import { onMounted } from 'vue'
import { useRoute } from 'vue-router';
// 引入仓库 获取菜单路由
import useUserStore from '../../store/modules/user'
import useSettingStore from '../../store/modules/setting'
let userStore = useUserStore()
let settingStore = useSettingStore()
let $route = useRoute()
// 页面挂载完毕 发请求获取用户信息
onMounted(() => {
    // userStore.userInfo()
})

</script>

<style lang="scss" scoped>
.home {
    width: 100%;
    height: 100vh;

    .home-slider {
        width: $base-menu-width;
        height: 100vh;
        background-color: $base-menu-background-color;
        color: white;
        /*添加过渡动画*/
        transition: all 0.3s;

        .scrollbar {
            height: calc(100vh - $base-menu-logo-height);

            .el-menu {
                border-right: none;
                --el-menu-bg-color: #402525;
            }
        }
    }

    .home-tabbar {
        /*计算左边tabbar的宽度*/
        width: calc(100% - $base-menu-width);
        height: $base-tabbar-height;
        position: fixed;
        top: 0;
        left: $base-menu-width;
        padding: 0 20px;
        line-height: $base-tabbar-height;
        transition: all 0.3s;
        border-bottom: 2px solid #e9e7e7;

        &.fold {
            width: calc(100vw - $base-menu-min-width);
            left: $base-menu-min-width;
        }
    }

    .home-main {
        width: calc(100% - $base-menu-width);
        height: calc(100vh - $base-tabbar-height);
        position: absolute;
        top: $base-tabbar-height;
        left: $base-menu-width;
        padding: 20px;
        overflow: auto;
        transition: all 0.3s;

        &.fold {
            width: calc(100vw - $base-menu-min-width);
            left: $base-menu-min-width;
        }

        p {
            height: 1300px;
        }
    }
}
</style>